<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板template分离</title>
</head>

<body>
    <script src="/js/vue.js"></script>
    <div id="app">
        <my-cpn></my-cpn>
        <cpn></cpn>
    </div>


    <!-- 模板分离两种方式 -->
    <!-- 第一方法： script标签，类型为text/x-template -->
    <script type="text/x-template" id="cpnT">
        <div>
            <h2>组件的标题2</h2>
            <p>组件中的内容2</p>
            <button>button</button>
        </div>
    </script>

    <!-- 第二种方法：template标签 -->
    <template id="cpnT2">
        <div>
            <h2>组件的标题3</h2>
            <p>组件中的内容3</p>
            <button>button</button>
        </div>
    </template>


    <script>

        // 1. 创建 组件 对象
        const cpn = {// 这个对象内部调用extend函数
            template: "#cpnT",
        }



        Vue.component("my-cpn", {// 这个对象内部调用extend函数
            template: "#cpnT",
            components: {

            }
        }
        )

        // 实例可以看作一个最大的组件也就是root组件
        let app = new Vue({
            el: "#app",
            data: {
                msg: "hello",
            },
            components: {
                cpn: {
                    template: "#cpnT2"
                }
            }
        })
    </script>
</body>

</html>